<template>
  <div class="common-layout">
    <el-container>
      <el-header
        style="background-color: #007bff; color: white; display: flex; justify-content: space-between; align-items: center; height: 60px;">
        <div style="font-size: 20px; margin-left: 10px;">高校教材管理系统</div>
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">Admin</span>
          <span
            style="background-color: red; color: white; border-radius: 50%; padding: 2px 5px; margin-right: 10px;">50</span>
          <el-icon style="margin-right: 10px;"><Setting /></el-icon>
          <el-icon @click="quit"><SwitchButton /></el-icon>
        </div>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
              default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>系统用户管理</span>
                </template>
                <!-- 切换界面时要修改index -->
                <el-menu-item index="/dashboard/one">系统基本信息</el-menu-item>
                <el-menu-item index="/dashboard/two">管理员信息列表</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>班级信息管理</span>
                </template>
                <el-menu-item index="/dashboard/class">班级信息管理</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>学生信息管理</span>
                </template>

                <el-menu-item index="/dashboard/students">学生信息管理</el-menu-item>
                <el-menu-item index="/dashboard/addstu">学生信息添加修改</el-menu-item>

                <el-menu-item index="/dashboard/students">item one</el-menu-item>
                <el-menu-item index="3-2">item two</el-menu-item>

              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>教师信息管理</span>
                </template>
                <el-menu-item index="/dashboard/teacher">教师信息管理</el-menu-item>
                
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>课程信息管理</span>
                </template>
                <el-menu-item index="/dashboard/course">课程信息</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>教材信息管理管理</span>
                </template>
                <el-menu-item index="/dashboard/textbookapplication">教材领取审核</el-menu-item>
                <el-menu-item index="/dashboard/textbook">教材信息</el-menu-item>
                <el-menu-item index="6-2">item two</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="7">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>系统通知管理管理</span>
                </template>
                <el-menu-item index="7-1">/</el-menu-item>
                <el-menu-item index="7-2">item two</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="8">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>系统通知查看</span>
                </template>
                <el-menu-item index="/dashboard/system">系统通知查看</el-menu-item>
                <el-menu-item index="8-2">item two</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main style="background-color: #e9ecef; padding: 20px;">
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
        <el-header
          style="background-color: #007bff; color: white; text-align: center; line-height: 40px; font-size: 16px;">版权所有 侵权必究 版权归属 www.baiyanghuieamail.com</el-header>
    </el-container>
  </div>
</template>

<script setup>
import router from '@/router';
import { RouterView } from 'vue-router';
import { ElMessageBox } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
  console.log('Menu opened', key, keyPath);
};

const handleClose = (key, keyPath) => {
  console.log('Menu closed', key, keyPath);
};

const quit = async () => {
  try {
    const confirmed = await ElMessageBox.confirm('确定要退出吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    if (confirmed) {
      localStorage.removeItem('token'); // 清除登录状态
      router.push('/'); // 跳转到登录页
    }
  } catch (error) {
    console.log('用户取消退出');
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

.common-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  flex: 1;
}

.el-aside {
  background-color: #545c64;
  color: white;
}

.el-menu-vertical-demo {
  border-right: none;
}

.el-menu-item {
  border-bottom: 1px solid #666;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.el-menu-item:hover {
  background-color: #666;
}

.el-menu-item-group__title {
  font-weight: bold;
  padding: 10px 20px;
}

.el-main {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>